/*
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-08-17 15:48:03
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-24 11:37:29
 * @FilePath: \四阶段\src\components\loginLog\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React,{useState,useEffect} from 'react'

import { DatePicker,Button,Space, Table, ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN'
import {inject,observer} from "mobx-react"
import MyPagination from '../../components/common/MyPagination'
import { toJS } from 'mobx';

function LoginLog(props) {
  const [data,setdata]=useState(props.LoginLogStore.LoginLogList)
  //显示数据
  const displayData=()=>{
    props.LoginLogStore.getLoginLogList(1,5).then((data)=>{
      setdata(data.data)
      console.log(data);
    })
  }
useEffect(()=>{
  displayData()
  return ()=>{
    
  }
// eslint-disable-next-line react-hooks/exhaustive-deps
},[])
const onChangedata= (date, dateString) => {
  console.log(date, dateString);
  setStartTime(dateString)
};
const onChangedata2= (date, dateString) => {
  console.log(date, dateString);
  setEndTime(dateString)
};

const [time1,setStartTime]=useState('')
const [time2,setEndTime]=useState('')

//搜索按钮
 const sractBtn=async()=>{
    let obj={
      currentPage:1,
    pageSize:5,
    startTime:time1,
    endTime:time2
    }
    console.log(toJS(obj),'发起请求传参');
    const result=await props.LoginLogStore.getSeachList(obj)
    console.log(result);
    if(result.code===200){
      displayData()
    }
 }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'login_id',
      key: 'login_id',
    },
    {
      title: '姓名',
      dataIndex: 'login_name',
      key: 'login_name',
    },
    {
      title: '登录时间',
      dataIndex: 'login_time',
      key: 'login_time',
    },
    {
      title: '登录IP',
      key: 'login_ip',
      dataIndex: 'login_ip',
    },
    {
      title: '登录状态',
      key: 'login_status',
      dataIndex: 'login_status',
      render:(text,record)=> <span >{text===0?'失败':text===1?'成功':''}</span>
    },
    {
      title: '操作',
      key: 'action',
      dataIndex: 'action',
      render: (text,record) => (
        <Space size="middle">
          <Button onClick={()=>{deleteBtn(record.login_id)}}>删除</Button>
        </Space>
      ),
    },
  ];
   //删除所有
 const deleteAll=async()=>{
  const result=await props.LoginLogStore.deleteAllData()
  console.log(result);
  // displayData()
  if(result.code===200){
    displayData()
  }
 }
  //删除按钮
  // const deleteBtn=(login_id)=>{
  //   console.log(typeof(login_id));
  //   props.LoginLogStore.deleteBtnfun(login_id)
    
  // }
  const deleteBtn=async(login_id)=>{
    console.log(login_id);
   const result=await props.LoginLogStore.deleteBtnfun(login_id)
   console.log(result);
   if(result.code===200){
    displayData()
   }
  }
  let paginationProps={
    currentPage:1,
    pageSize:5,
    total:data.length,
    onChange:page=>handlePageChange(page)
  }
  const handlePageChange=(page)=>{
    console.log(page);
    paginationProps.currentPage=page
  }
  const onPageChange=(currentPage,pageSize)=>{
   props.LoginLogStore.currentPage=currentPage
   props.LoginLogStore.pageSize=pageSize
  }
  return (
    <div>
    <ConfigProvider locale={zhCN}>
    <DatePicker onChange={onChangedata}  />
    <DatePicker onChange={onChangedata2}  />
    <Button onClick={sractBtn}>快速搜索</Button>
    <Button onClick={deleteAll}>清空记录</Button>
    </ConfigProvider>
    <div>
    <Table columns={columns} dataSource={data} rowKey='login_id' pagination={paginationProps}/>
    </div>
  
    </div>
  )
}
export default inject('LoginLogStore')(observer(LoginLog))
